<template>
	<view>
		<u-navbar :background='background' :height="navBarHeight" back-icon-color="#FFF"></u-navbar>

		<view :style="{ height: mainHeight }" style="position:relative;z-index:9999;  color: #FFF;">
			<!-- 头部店铺信息 -->
			<view class="shop-info">
				<view class="detail-info">
					<view>
						<view class="shop-name">{{merchantInfo.name}}</view>
						<view class="sales_volume">
							<u-icon name="star-fill" color="#FF8000" size="28"></u-icon>
							<text>4.9</text>
							<text></text>
							<!-- <text>月售888</text> -->
						</view>
<!--						<text class="grade-ranking">车陂/东圃茶饮好评榜第3名</text>-->
					</view>
					<image class="shop-head-photo" mode="aspectFill" :src="merchantInfo.logo_img_url"></image>
				</view>
				<!-- <view class="discount-ticket">
					<view>
						<text>32减3</text>
						<text>48减6</text>
						<text>76减10</text>
					</view>
					<view>天天神券</view>
					<view>首单减15</view>
				</view> -->
				<view class='welcome'>公告： 欢迎光临， 很高兴为您服务 ~</view>
			</view>

			<!-- 店铺美食分类列表 -->
			<view class="meal-main" :style="{ height: mealHeight }">

				<view class="classify-left" :style="{ height: mealHeight }">
					<view class="nav-item" v-for="(item,index) in classifyList" :key="index" :class="{'active':current==index}" @click="navChange(item.id,index)"><text>{{item.name}}</text></view>
				</view>

				<view class="classify-right" :style="{ height: mealHeight }">
					<view class="tabbar-container">
						<u-tabs :list="next_classifies" :is-scroll="false" :current="tabCurrent" height="96" active-color="#59c264" :show-bar="false" @change="change"></u-tabs>
					</view>


					<view class="classify-list">
						<view class="classify-item"  v-for="(item,index) in next_classifiesList" :key="index" @click="toGoodList(item.id,item.name)">
							<image mode="aspectFill" :src="item.thumb_url" @click.stop="toGoodsDetail(item.id)" />
							<view class="item-info">
								<view class="item-name" @click.stop="toGoodsDetail(item.id)">{{ item.name }}</view>
								<view class="item-desc">{{ item.desc }}</view>
								<view class="item-price">
									<view>
										<text>{{ item.selling_price }}</text>
										<text>{{ item.selling_price }}</text>
									</view>
									<image @click="addCart(item.id)" mode="aspectFit" src="../../static/shopDetail/add.png"></image>
								</view>
							</view>
						</view>
					</view>

				</view>

			</view>

			<!-- 购物栏 -->
			<view class="cart">
				<view class="cart-main" style="background-image:url(http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/tea2021/3/2/cart2.png)">
					<view style="background-image:url(http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/tea2021/3/2/cart1.png);">{{cartsNum}}</view>
					<view>选购完成后请点击结算</view>
					<view @click="toOrder" style="background-image:url(http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/tea2021/3/2/cart3.png)">结算</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		name:'shopDetail',
		data() {
			return {
				navBarHeight: 130,
				statusNavBarHeight: 0,
				shopInfoHeight: 0,
				current: 0,
				tabCurrent: 0,
				backgroundImgUrl:"http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/tea2021/3/2/head.jpg",
				background:"",

				classifyList: [],
				next_classifies: [], // 二级分类
				next_classifiesList: [], // 二级分类商品
				cartList: [],
				num: 0,
				name: '',
				merchant_id: '',
				cartsNum: 0,
				merchantInfo:'',
				delGoodsIds:[]
			}
		},
		methods: {
			toGoodsDetail(id){
				wx.navigateTo({url:'/pages/goodsDetail/goodsDetail?id='+id})
			},
			navChange(id,index) {
				this.current = index;
				this.next_classifies = this.classifyList[index].next_classifies
				if (this.next_classifies.length) {
					this.getMerchantMedicineList(this.next_classifies[this.tabCurrent].id)
				}
			},
			toGoodList() {},
			change(index) {
				this.tabCurrent = index;
				this.getMerchantMedicineList(this.next_classifies[index].id)
			},

			async getBuyingClassifyList() {
				const res = await this.$api.getBuyingClassifyList({merchant_id: this.merchant_id}, this.$baseUrl)
				if (res.data.level === "success") {
					console.log(res);
					this.classifyList = res.data.data
				} else {
					wx.showToast({
						title: res.data.message,
						icon: "none",
						duration: 1500
					})
				}
			},

			async getMerchantMedicineList(classify_id="") {
				const res = await this.$api.getMerchantMedicineList({merchant_id: this.merchant_id, classify_id}, this.$baseUrl)
				if (res.data.level === "success") {
					this.next_classifiesList = res.data.data.medicine_info
				} else {
					wx.showToast({
						title: res.data.message,
						icon: "none",
						duration: 1500
					})
				}
			},

			// 获取店铺详情
			async getMerchantInfo() {
				wx.showLoading({
					title: '加载中',
				})
				const res = await this.$api.getMerchantInfo({merchant_id: this.merchant_id}, this.$baseUrl)
				wx.hideLoading()
				if (res.data.level === "success") {
					this.merchantInfo = res.data.data
					this.backgroundImgUrl = this.merchantInfo.bg_url != "" ? this.merchantInfo.bg_url  : "http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/tea2021/3/2/head.jpg";
					this.background = {
						backgroundImage: "linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.1)),url('"+this.backgroundImgUrl+"')",
						backgroundRepeat: "no-repeat",
						backgroundSize: "cover",
					}

					wx.setStorageSync("merchant", res.data.data)
				} else {
					wx.showToast({
						title: res.data.message,
						icon: "none",
						duration: 1500
					})
				}
			},

			async addCart(medicine_id) {
				console.log(medicine_id);
				const res = await this.$api.addShopCart({medicine_id: medicine_id, change: +1},this.$baseUrl);
				if(res.data.level=='success'){
					wx.showToast({
						title: '1件商品成功加入购物车',
						icon: "none",
						duration: 1500
					})
					this.getCartList()
				}
			},


			async getCartList(type=''){
			    if(type!='more'){//type为more，是上拉加载更多
			        this.page=1
			    }
			  let userToken=wx.getStorageSync('userToken')
			  if(!userToken){
				  return
			  }
			  let merchant = wx.getStorageSync('merchant')
			  let res=await this.$api.getShopCart({user_token:userToken,page:this.page,limit:10,merchant_id: merchant.merchant_id},this.$baseUrl)
			  if(res.data.level==='success'){
				  //获取当前购物车的全部数量 TODO 需要遍历店铺，再遍历商铺里的商品，但好像只有一个店铺 可优化
				  this.cartsNum = 0;
				  this.cartList = res.data.data
				  for(let shop of res.data.data){
				  	shop.cart_item.forEach((item,index) => {
				  		this.cartsNum = this.cartsNum + parseInt(item.num);
				  	})
				  }

			  }
			},
			async delAllGoods(){
					this.page=1
				let userToken=wx.getStorageSync('userToken')
				if(!userToken){
					return
				}
				let merchant = wx.getStorageSync('merchant')
				let res=await this.$api.getShopCart({user_token:userToken,page:this.page,limit:10,merchant_id: merchant.merchant_id},this.$baseUrl)
				console.log("1111111111111111")
				if(res.data.level==='success'){
					//获取当前购物车的全部数量 TODO 需要遍历店铺，再遍历商铺里的商品，但好像只有一个店铺 可优化
					this.cartsNum = 0;
					this.cartList = res.data.data
					for(let shop of res.data.data){
						shop.cart_item.forEach((item,index) => {
							this.delGoodsIds.push(item.id)
						})
					}

				}
				let res2=await this.$api.deleteShopCart({shop_cart_ids:this.delGoodsIds,user_token:userToken},this.$baseUrl)
			},

			async delt(id){//删除选中的购物车商品
			    let userToken=wx.getStorageSync('userToken')
				if(!userToken){
					return
				}
			    let res=await this.$api.deleteShopCart({shop_cart_ids:id,user_token:userToken},this.$baseUrl)

			},

			async toOrder(){
				// let selectIdArr = []
				// for(let shop of this.cartList){
				// 	shop.cart_item.forEach((item,index) => {
				// 		selectIdArr.push(item.id)
				// 	})
				// }
				// console.log('执行',selectIdArr);
				// if(selectIdArr.length==0){
			  //     return
			  //   }
			  //   wx.showLoading({
				// 	title: '加载中'
				// })
			  //   let userToken=wx.getStorageSync('userToken')
			  //   let res=await this.$api.submitOrder({
			  //     shop_cart_ids:selectIdArr,
			  //     num:'',
				//   user_token: userToken
			  //   },this.$baseUrl)
			  //   if(res.data.level=="success"){
			  //       wx.hideLoading()
				// 	res.data.data.shop_cart = selectIdArr
			  //       this.$store.dispatch('setOrder',res.data.data)
			  //       wx.navigateTo({url:`/pages/orderConfirm/orderConfirm?type=cart`})
			  // } else {
				//   wx.hideLoading()
				//   wx.showToast({
				//   	title: res.data.message,
				//   	icon: 'none'
				//   })
			  // }
				uni.switchTab({url:`/pages/cart/cart`})
			}

		},
		// onUnload() {
		// 	for(let shop of this.cartList){
		// 		shop.cart_item.forEach((item,index) => {
		// 			this.delt([item.id])
		// 		})
		// 	}
		// },
		onShow() {
			const { statusBarHeight } = wx.getSystemInfoSync();
			this.statusNavBarHeight = statusBarHeight + this.navBarHeight;

			this.getMerchantInfo()
			this.getBuyingClassifyList();
			this.delAllGoods()
			this.getMerchantMedicineList();

			// this.getMerchantMedicineList();
		},

		onLoad(options) {
			console.log(options);
			this.name = options.name
			this.merchant_id = options.merchant_id
		},

		computed: {
			mainHeight() {
				return `calc(100vh - ${this.statusNavBarHeight}px)`
			},
			mealHeight() {
				let _this = this;
				wx.createSelectorQuery().select('.shop-info').boundingClientRect(function (res) {
					_this.shopInfoHeight = res.height
				}).exec()
				console.log(`calc(100vh - ${_this.statusNavBarHeight + _this.shopInfoHeight}px)`);
				return `calc(100vh - ${_this.statusNavBarHeight + _this.shopInfoHeight - 15 + 10}px)`
			},
		}
	}
</script>


<style lang="scss" scoped>
	@import "../../common/css/mixin.scss";
	.shop-info {
		box-sizing: border-box;
		position: relative;
		top: -30rpx;
		left: 0;
		z-index: 999;
		width: 100vw;
		padding: 0 32rpx;
		margin-bottom: 20rpx;
		background-color: #FFF;
		border-radius: 36rpx 36rpx 0 0;

		.detail-info {
			display: flex;
			justify-content: space-between;
			height: 138rpx;
			padding-top: 25rpx;

			.shop-name {
				height: 44rpx;
				line-height:44rpx;
				font-size: 44rpx;
				font-weight: 500;
				color: #111000;
			}
			.sales_volume {
				height: 46rpx;
				text:first-of-type {
					font-size: 24rpx;
					color: #FF8000;
				}
				text:last-child {
					margin-left: 20rpx;
					font-size: 24rpx;
					color: #878889;
				}
			}
			.grade-ranking {
				display: inline-block;
				height: 42rpx;
				padding: 0 20rpx;
				color: #696969;
				font-size: 24rpx;
				line-height: 42rpx;
				background-color: #f5f5f6;
				border-radius: 8rpx;
			}
			.shop-head-photo {
				width: 127rpx;
				height: 129rpx;
				border-radius: 10rpx;
				transform: translateY(-46rpx);
			}
		}
		.discount-ticket {
			display: flex;
			margin-top: 8rpx;
			color: #ff5635;
			font-size: 24rpx;

			view:first-of-type {
				padding: 6rpx 0;
				text {
					position: relative;
					padding: 0 8rpx;
				}
				text + text::before {
					position: absolute;
					top: 9rpx;
					left: 0;
					content: '';
					width: 2rpx;
					height: 20rpx;
					background-color: #FFDEDB;
				}
			}

			view {
				height: 30rpx;
				line-height: 30rpx;
				padding: 6rpx 10rpx;
				margin-right: 8rpx;
				border: 1px solid #FFDEDB;
				border-radius: 12rpx;
			}
		}
		.welcome {
			height: 22rpx;
			margin-top: 23rpx;
			line-height: 22rpx;
			font-size: 22rpx;
			color: #a3a2a3;
		}
	}

	.meal-main {
		position: relative;
		z-index: 999;
		width: 100vw;
		// height: calc(100vh - 300rpx - 240rpx);

		background-color: #FFF;
		font-size: 14px;
		@include flex(flex-start,flex-start);
		flex-direction: row;
		transform: translateY(-30rpx);
		@include flex(flex-start,flex-start);

		.classify-left{
		    width: 25vw;
			height: calc(100vh - 300rpx - 240rpx);
		    color: #737277;
		    background-color: #f7f6fb;
		    height: 100%;
		    overflow: auto;

		    .nav-item{
				display: flex;
				box-sizing: border-box;
				align-items: center;
				height: 96rpx;
				text {
					display:inline-block;
					width: 100%;
					height: 49rpx;
					line-height: 49rpx;
					text-align: center;
				}
		    }
		  .active {
			background-color: #FFF;
			text {
				color: #000;
				font-weight: 600;
				border-left: 6rpx solid #59C264;
			}
		  }
		}

		.classify-right{
			box-sizing: border-box;
		    width: 75vw;
			padding-top: 52px;
		    background: #ffffff;
		    height: calc(100vh - 300rpx - 240rpx);
		    overflow: auto;

			.tabbar-container {
				position: fixed;
				top: -2rpx;
				right: 0;
				width: 75vw;
			}

			.classify-list {
				box-sizing: border-box;
				width: 100%;
				padding: 0 30rpx 0 23rpx;

				.classify-item {
					box-sizing: border-box;
					display: flex;
					width: 100%;
					height: 140rpx;
					padding: 10rpx 0;

					image {
						width: 120rpx;
						height: 120rpx;
						margin-right: 15rpx;
					}

					.item-info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: calc(100% - 120rpx - 15rpx);
						height: 100%;
						.item-name {
							height: 30rpx;
							font-size: 30rpx;
							line-height: 30rpx;
							font-weight: 400;
							color: #2F3135;
						}
						.item-desc {
							height: 22rpx;
							margin-top: 10rpx;
							line-height: 22rpx;
							font-size: 22rpx;
							font-weight: 400;
							color: #B3B9C2;
						}
						.item-price {
							display: flex;
							justify-content: space-between;
							width: 100%;
							view text:first-of-type {
								height: 32rpx;
								line-height: 32rpx;
								font-size: 32rpx;
								font-weight: 400;
								color: #FF641F;
							}
							view text:last-of-type {
								margin-left: 15rpx;
								font-size: 24rpx;
								font-weight: 400;
								text-decoration: line-through;
								color: #B3B9C2;
							}
							image {
								width: 38rpx;
								height: 38rpx;
							}
						}
					}

				}
				.classify-item + .classify-item {
					margin-top: 48rpx;
				}
			}

		}
	}

	.cart {
		z-index: 9999;
		position: fixed;
		bottom: 35rpx;
		left: 0;
		width: 100vw;
		height: 98rpx;
		.cart-main {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 690rpx;
			height: 100%;
			margin: 0 auto;
			background-size: 100%;
			background-repeat: no-repeat;
			view:first-child {
				width: 87rpx;
				height: 117rpx;
				background-size: 100%;
				background-repeat: no-repeat;
				line-height: 140rpx;
				text-align: center;
				font-weight: 600;
				font-size: 50rpx;
				color: #de984f;
				transform: translate(-2rpx, -10rpx)
			}
			view:nth-of-type(2) {
				font-size: 30rpx;
				font-weight: 400;
				color: #A9AFB5;
				transform: translateX(-60rpx);
			}
			view:last-child {
				width: 188rpx;
				height: 78rpx;
				margin-right: 10rpx;
				background-size: 100%;
				line-height: 78rpx;
				text-align: center;
				font-size: 34rpx;
				font-weight: 400;
				color: #FFF;
			}
		}
	}
</style>
<style scoped>
	/deep/.u-navbar-inner {
		align-items: flex-start !important;
	}
</style>
